<template>
	<view v-if="show">
		<view class="banner">
			<uni-swiper-dot :info="detail.imgs_url" :current="swiperDotCurrent" field="content" mode="default">
				<swiper class="swiper-box" @change="swiperChange">
					<swiper-item v-for="(item, index) in detail.imgs_url" :key="index">
						<view>
							<image class="swiper-image" :src="item" mode="" @click="showBigImg('details',index)">
							</image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>

		<view class="content">
			<view class="header">
				<view class="price">
					￥{{ goods_price }} <text>￥{{ line_price }}</text>
				</view>
				<view class="nums">
					{{ detail.goods_sales }}人付款
				</view>
			</view>

			<view class="name">
				{{ detail.goods_name }}
			</view>

			<view class="icons">
				<view class="icons-item">
					<image src="../../static/icon/zp.png" mode=""></image>
					<view class="text">
						正品保证
					</view>
				</view>
				<view class="icons-item">
					<image src="../../static/icon/wl.png" mode=""></image>
					<view class="text">
						极速物流
					</view>
				</view>
				<view class="icons-item">
					<image src="../../static/icon/kb.png" mode=""></image>
					<view class="text">
						卓越口碑
					</view>
				</view>
				<view class="icons-item">
					<image src="../../static/icon/fw.png" mode=""></image>
					<view class="text">
						专业服务
					</view>
				</view>
			</view>

			<!-- <view class="li">
				<view class="li-left">
					保障<text>7天无理由退货，假一赔十</text>
				</view>
			</view> -->
			<view class="li" @click="checkGoodsClick">
				<view class="li-left">
					规格<text>请选择商品规格</text>
				</view>
				<view class="li-right">
					<image src="../../static/icon/detail_select.png" mode=""></image>
				</view>
			</view>
		</view>

		<view class="product-content">
			<view class="tab">
				<view class="tab-item tab-item-active"
					:class="{'tab-item-active': prodcutCurrentTab == 0, 'tab-item-no': prodcutCurrentTab == 0}"
					@click="prodcutTabClick(0)">
					<view class="tab-item-title">
						产品详情
						<view class="tab-item-img" v-if="prodcutCurrentTab == 0">
							<image src="../../static/icon/order_tab.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="tab-item tab-item-no"
					:class="{'tab-item-active': prodcutCurrentTab == 1, 'tab-item-no': prodcutCurrentTab == 1}"
					@click="prodcutTabClick(1)">
					<view class="tab-item-title">
						产品评价
						<view class="tab-item-img" v-if="prodcutCurrentTab == 1">
							<image src="../../static/icon/order_tab.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>

			<view class="prodcut-detail" v-if="prodcutCurrentTab == 0">
				<u-parse :content="detail.content" :imageProp="{mode:'widthFix'}"></u-parse>
			</view>

			<view class="evaluate" v-if="prodcutCurrentTab == 1">
				<view class="e-title">宝贝评价({{evaluateTotal}})</view>
				<view class="e-items">
					<view class="e-item" v-for="(item,index) in evaluateList" :key="index">
						<view class="e-img">
							<image :src="item.avatar" mode=""></image>
						</view>
						<view class="e-message">
							<view class="username">{{item.nickname}}</view>
							<view class="score">
								<uni-rate :readonly="true" :value="item.scores" active-color="red" size="14" />
							</view>
							<view class="e-content">
								<view class="cont">
									{{item.content}}
								</view>
								<view class="goodsImg" v-if="item.images.length > 0">
									<block v-for="(imgItem,Iindex) in item.images" :key="Iindex">
										<view class="goods-img">
											<image :src="imgItem" mode="" @click="showBigImg('goods',Iindex,index)">
											</image>
											<view class="goods-after" v-if="Iindex == item.images.length - 1">
												共{{item.images.length}}张</view>
										</view>
									</block>
								</view>
								<view class="time">
									<text style="margin-right: 18rpx;">{{item.createtime}}</text>
									<text v-if="item.goods_attr">已购规格：{{item.goods_attr}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="carts">
			<view class="left">
				<button class="carts-items" @click="kefuClick">
					<uni-icons type="person" size="20" color="#000000"></uni-icons>
					<view class="">客服</view>
				</button>
				<button class="carts-items" open-type="share">
					<uni-icons type="redo" size="20" color="#000000"></uni-icons>
					<view class="">转发</view>
				</button>
				<button class="carts-items" @click="toCartClick">
					<uni-icons type="cart" size="20" color="#000000"></uni-icons>
					<view class="">购物车</view>
				</button>
			</view>
			<view class="right">
				<button class="cart" @click="checkGoodsClick()">加入购物车</button>
				<button class="buy" @click="checkGoodsClick()">立即购买</button>
			</view>
		</view>

		<view class="">
			<uni-popup ref="popup" background-color="#fff">
				<view class="popup-content" :style="{'height':popupHeight +'px'}">
					<view class="content-header">
						<view class="header-text">
							<!-- 请选择拍摄产品 -->
						</view>
						<image src="../../static/icon/close.png" mode="" @click="closePopup"></image>
					</view>

					<view class="content-product">
						<view class="product-left">
							<image :src="goods_spec_image" mode="scaleToFill"></image>
						</view>
						<view class="product-right">
							<view class="name">
								{{ detail.goods_name }}
							</view>
							<view class="price">
								￥{{ goods_price }}
							</view>
						</view>
					</view>
					<view class="" style="overflow: scroll;" :style="{'height': popupHeight - 150 + 'px'}">
						<scroll-view :scroll-y="true" scroll-with-animation :throttle="false">

							<view class="content-spec" v-for="(item,index) in specData.spec_attr" :key="index">
								<view class="spec-header">
									{{ item.group_name }}
								</view>
								<view class="spec-content">
									<view class="spec-tag" v-for="(sitem,sindex) in item.spec_items" :key="sindex"
										:class="{'spec-tag-active': sitem.checked,'spec-tag-no': !sitem.checked}"
										@click="specItemClick(index,sindex)">
										{{ sitem.spec_value }}
									</view>
								</view>
							</view>
							<!-- <view class="content-address">
								<view class="address-left">
									请选择收货地址
								</view>
								<view class="address-right">
									<image src="../../static/icon/detail_select.png" mode=""></image>
								</view>
							</view> -->
							<view class="content-number">
								<view class="text">
									库存 <text>{{ stock_num }}</text>
								</view>
								<view class="">
									<uni-number-box v-model="goods_num" min="1" :max="stock_num" />
								</view>
							</view>
						</scroll-view>
					</view>

					<view class="popup-footer">
						<view class="pfooter-content">
							<view class="pfooter-left">
								<view class="pftooer-buy-btn btn-white" @click="cartClick">
									加入购物车
								</view>
							</view>
							<view class="pftooer-right">
								<view class="pftooer-buy-btn btn-black" @click="buyClick">
									立即购买
								</view>
							</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>

		<view>
			<authorize ref="authorize" :auth-show="authShow" :info-auth="infoAuth" :mobile-auth="mobileAuth"
				@updateInfo="userUpdateInfo">
			</authorize>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations,
	} from 'vuex';
	export default {
		data() {
			return {
				show: false,
				popupHeight: 500,
				swiperDotCurrent: 0,
				goods_id: 0,
				detail: [],
				goods_spec_arr: [], // 记录规格的数组
				specData: [],
				goods_num: 1, //购买数量
				goods_sku_id: 0, // 规格id
				goods_price: 0,
				stock_num: 0,
				line_price: 0,
				cartnum: 0,
				addcart_loading: false,
				current_img_index: 0,
				sku_hidden_arr: [],
				goods_spec_image: '',
				prodcutCurrentTab: 0,
				page: 1,
				pageSize: 10,
				last_page: 1,
				evaluateList: [],
				evaluateTotal: 0,
				authShow: false,
				showOverlay: false
			}
		},
		computed: {
			...mapGetters({
				userInfo: 'user/info',
				infoAuth: 'user/infoAuth',
				mobileAuth: 'user/mobileAuth',
			})
		},
		onLoad(options) {
			this.showOverlay = getApp().globalData.showOverlay
			
			if(this.showOverlay){
				let systemInfo = uni.getSystemInfoSync()
				
				this.popupHeight = systemInfo.windowHeight - 300
			}

			if (options.scene) {
				this.goods_id = options.scene
			} else {
				this.goods_id = options.goods_id
			}

			this.getDetail()
		},
		onReachBottom() {
			let _this = this;

			if (_this.prodcutCurrentTab == 0) {
				return false
			}

			// 已经是最后一页
			if (_this.page >= _this.last_page) {
				return false;
			}

			_this.page++

			_this.getEvaluate()
		},
		onShareAppMessage() {
			this.shareSend()
			return {
				title: this.detail.goods_name,
				path: `/pages/mall/detail?goods_id=${this.goods_id}`,
				imageUrl: this.detail.imgs_url[0]
			}
		},
		onShareTimeline() {
			this.shareSend()
			return {
				title: this.detail.goods_name,
				imageUrl:  this.detail.imgs_url[0],
				query: `goods_id=${this.goods_id}`
			}
		},
		methods: {
			...mapMutations({
				setUserInfo: 'user/login'
			}),
			userUpdateInfo(data) {
				this.setUserInfo(data)
			},
			swiperChange(e) {
				this.swiperDotCurrent = e.detail.current
			},
			prodcutTabClick(type) {
				if (this.prodcutCurrentTab == type) {
					return false
				}

				this.prodcutCurrentTab = type
			},
			showBigImg(type, Iindex, index) {
				uni.previewImage({
					current: Iindex,
					urls: type == 'goods' ? this.evaluateList[index].images : this.detail.imgs_url
				})
			},
			shareSend() {
				let _this = this
				_this.$api.get('meet.user/share', {}).then(res => {}, fail => {})
			},
			getDetail() {
				let _this = this
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				_this.$api.get('mall.goods/detail', {
					goods_id: _this.goods_id
				}).then(res => {
					if (res.code == 1) {
						_this.detail = res.data.detail
						_this.specData = res.data.specData

						// 初始化商品多规格
						if (res.data.detail.spec_type === '20') {
							_this.initManySpecData(res.data);
						} else {
							_this.goods_sku_id = res.data.detail.spec[0].spec_sku_id
							_this.goods_price = res.data.detail.spec[0].goods_price
							_this.line_price = res.data.detail.spec[0].line_price
							_this.stock_num = res.data.detail.spec[0].stock_num
							_this.goods_spec_image = _this.detail.spec[0].spec_image_full
						}

						//根据选择后的情况 分配sku的可选情况
						if (res.data.detail.spec_type === '20') {
							_this.make_sku_showData(res.data.specData, 0);
						}

						this.getEvaluate()

						_this.show = true

						uni.hideLoading()
						// this.$nextTick(() => {
						// 	this.$refs.popup.open('bottom')
						// })
					} else {
						uni.showModal({
							title: '提示',
							content: res.msg,
							showCancel: false,
							cancelText: '',
							confirmText: '确认',
							success: res => {
								uni.navigateBack({
									delta: 1
								});
							},
							fail: () => {},
							complete: () => {}
						});
					}
				}, fail => {})
			},
			getEvaluate() {
				let _this = this
				_this.$api.get('mall.evaluate/index', {
					goods_id: _this.goods_id,
					page: _this.page,
					page_size: _this.pageSize
				}).then(res => {
					if (res.code == 1) {
						_this.evaluateTotal = res.data.total
						let list = _this.evaluateList.concat(res.data.data)
						_this.evaluateList = list
						_this.last_page = res.data.last_page
					} else {
						_this.toast(res.msg)
					}
				})
			},
			/**
			 * 初始化商品多规格
			 */
			initManySpecData: function(data) {
				var _this = this;
				for (let i in data.specData.spec_list) {
					if (data.specData.spec_list[i].form.stock_num >= 0) {
						var sku_id = data.specData.spec_list[i].spec_sku_id.split('_');
						//初始化 sku 显示
						// 商品价格/划线价/库存
						_this.goods_sku_id = data.detail.spec[i].spec_sku_id
						_this.goods_price = data.detail.spec[i].goods_price
						_this.line_price = data.detail.spec[i].line_price
						_this.stock_num = data.detail.spec[i].stock_num
						_this.goods_spec_image = data.detail.spec[i].spec_image_full
						for (let j in sku_id) {
							_this.goods_spec_arr[j] = parseInt(sku_id[j]);
						}
						break;
					}
				}

				for (let i in _this.specData.spec_attr) {
					let spec_items = _this.specData.spec_attr[i].spec_items
					for (let j in spec_items) {
						_this.specData.spec_attr[i].spec_items[j].checked = j == 0 ? true : false
					}
				}

				//初始化 隐藏sku数组
				_this.sku_hidden_arr = [];
				for (let i in data.specData.spec_list) {
					if (data.specData.spec_list[i].form.stock_num < 0) {
						_this.sku_hidden_arr.push(data.specData.spec_list[i].spec_sku_id.split('_'));
					}
				}
			},

			make_sku_showData: function(data, break_num) {
				var _this = this;
				//显示的sku数据为：
				var Showskuiteam = data.spec_attr;
				//初始化显示数据hidden为false
				Showskuiteam.forEach(function(value, index, array) {
					value.spec_items.forEach(function(value1, index1, array1) {
						value1.hidden = false;
					});
				});

				//循环 行规格 可选格式化，根据后面所有不变的sku规格
				Showskuiteam.forEach(function(value, index, array) {
					//这里 那一个选项
					//if (index != break_num) {
					_this.for_eachsku_showData(Showskuiteam, index);
					//}
				});
			},

			for_eachsku_showData: function(Showskuiteam, ForNum) {
				//隐藏ku组合情况：
				var Sku_hidden = this.sku_hidden_arr;
				//现在选择的情况是：
				var Nowselect = this.goods_spec_arr;

				//循环 每行规格 可选格式化，根据后面所有不变的sku规格
				Sku_hidden.forEach(function(Sku_hiddenvalue, Sku_hiddenindex, Sku_hiddenarray) {
					//针对每个隐藏sku 匹配
					var peiduiNum = 0;
					Sku_hiddenvalue.forEach(function(value, index, array) {
						if (index != ForNum) {
							if (value == Nowselect[index]) {
								peiduiNum++;
							}
						}
					});
					if (peiduiNum == (Nowselect.length - 1)) {
						//此时 此sku为隐藏项目
						Showskuiteam.forEach(function(Showskuiteamvalue, Showskuiteamindex,
							Showskuiteamarray) {
							Showskuiteamvalue.spec_items.forEach(function(value1, index1, array1) {
								if (value1.item_id == Sku_hiddenvalue[ForNum]) {
									value1.hidden = true;
								}
							});
						});
					}
				});
			},

			specItemClick(index, sindex) {
				let _this = this

				for (let j in _this.specData.spec_attr[index].spec_items) {
					if (sindex == j) {
						_this.$set(_this.specData.spec_attr[index].spec_items, j, {
							..._this.specData.spec_attr[index].spec_items[j],
							checked: true
						})

						this.goodsChange(index, _this.specData.spec_attr[index].spec_items[j].item_id)
					} else {
						_this.$set(_this.specData.spec_attr[index].spec_items, j, {
							..._this.specData.spec_attr[index].spec_items[j],
							checked: false
						})
					}
				}
			},

			goodsChange(attr_idx, item_id) {
				let goods_spec_arr = this.goods_spec_arr

				goods_spec_arr[attr_idx] = parseInt(item_id)

				//这里如果发现目前选项是不可选的，那么通过分配其余可选的选项  
				this.make_good_sel_sku(goods_spec_arr, attr_idx);

				this.updateSpecGoods();

				this.make_sku_showData(this.specData, attr_idx);
			},

			make_good_sel_sku: function(goods_spec_arr, attr_idx) {
				var _this = this;
				//首先判断此选项是否合法
				if (_this.check_good_sel_sku(goods_spec_arr)) {

				} else {
					//循环sku列表 找到当前选择的第一匹配sku项目
					var spec_list = this.specData.spec_list;
					spec_list.forEach(function(value, index, array) {
						if (value.form.stock_num >= 0) {
							var sku_id_arr = value.spec_sku_id.split('_');
							sku_id_arr.forEach(function(sku_id_arrvalue, sku_id_arrindex, sku_id_arrarray) {
								if (sku_id_arrindex == attr_idx && goods_spec_arr[sku_id_arrindex] ==
									sku_id_arrvalue) {
									//找到目前的匹配项 可使用的sku
									goods_spec_arr = sku_id_arr;
								}
							});
						}
					});
				}
				//格式化
				goods_spec_arr.forEach(function(value, index, array) {
					goods_spec_arr[index] = parseInt(value);
				});

				_this.goods_spec_arr = goods_spec_arr
			},

			check_good_sel_sku: function(goods_spec_arr) {
				var re_r = true;
				//隐藏sku组合情况：
				var Sku_hidden = this.sku_hidden_arr;
				Sku_hidden.forEach(function(Sku_hiddenvalue, Sku_hiddenindex, Sku_hiddenarray) {
					//针对每个隐藏sku 匹配
					var peiduiNum = 0;
					Sku_hiddenvalue.forEach(function(value, index, array) {
						if (value == goods_spec_arr[index]) {
							peiduiNum++;
						}
					});
					if (peiduiNum == Sku_hiddenvalue.length) {
						//发现了不合法
						re_r = false;
					}
				});
				return re_r;
			},

			updateSpecGoods: function() {
				let spec_sku_id = this.goods_spec_arr.join('_');

				// 查找skuItem
				let spec_list = this.specData.spec_list,
					skuItem = spec_list.find((val) => {
						return val.spec_sku_id == spec_sku_id;
					});

				// 记录goods_sku_id
				// 更新商品价格、划线价、库存
				if (typeof skuItem === 'object') {
					this.goods_sku_id = skuItem.spec_sku_id
					this.goods_price = skuItem.form.goods_price
					this.line_price = skuItem.form.line_price
					this.stock_num = skuItem.form.stock_num
					this.goods_spec_image = skuItem.form.imgshow
				}
			},

			checkGoodsClick() {
				if(this.showOverlay){
					this.toast('请前往小程序使用完整服务')
					return false
				}
				
				this.$refs.popup.open('bottom')
			},

			closePopup() {
				this.$refs.popup.close()
			},

			buyClick() {
				let _this = this
				
				if(_this.showOverlay){
					_this.toast('请前往小程序使用完整服务')
					return false
				}
				
				if (!_this.infoAuth) {
					_this.authShow = true
					_this.$refs.authorize.$refs.popup.open('center')
				} else if (!_this.mobileAuth) {
					_this.authShow = true
					_this.$refs.authorize.$refs.mobilePopup.open('center')
				} else {
					uni.navigateTo({
						url: '/pages/mall/submit?type=buyNow&goods_id=' + _this.goods_id + '&goods_num=' + _this
							.goods_num + '&goods_sku_id=' + _this.goods_sku_id
					})
				}
			},

			cartClick() {
				let _this = this;
				
				if(_this.showOverlay){
					_this.toast('请前往小程序使用完整服务')
					return false
				}

				uni.showLoading({
					title: '加载中...',
					mask: true

				})

				_this.$api.post('mall.cart/add', {
					goods_id: _this.goods_id,
					goods_num: _this.goods_num,
					goods_sku_id: _this.goods_sku_id,
				}).then(res => {
					uni.hideLoading()
					_this.toast(res.msg)
					_this.cartnum = res.data.cart_total_num
				}, fail => {
					uni.hideLoading()
				})
			},

			toCartClick() {
				uni.navigateTo({
					url: '/pages/mall/cart'
				})
			},

			kefuClick() {
				let token = uni.getStorageSync("app_token")
				uni.navigateTo({
					url: '/pages/kefu/kefu?token=' + token
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
		padding-bottom: 150rpx
	}

	.swiper-box {
		height: 720rpx;
	}

	.swiper-image {
		width: 100%;
		height: 720rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.content {
		padding: 16rpx 28rpx 0 28rpx;
		background-color: #FFFFFF;

		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.price {
				display: flex;
				align-items: center;
				font-weight: 800;
				font-size: 32rpx;
				color: #F73830;

				text {
					font-size: 20rpx;
					color: #8A8A8A;
					font-weight: 400;
					margin-left: 12rpx;
					text-decoration: line-through;
				}
			}

			.nums {
				font-weight: 400;
				font-size: 20rpx;
				color: #8A8A8A;
			}
		}

		.name {
			margin-top: 10rpx;
			font-weight: 800;
			font-size: 28rpx;
			color: #010101;
		}

		.icons {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 36rpx;
			margin-bottom: 32rpx;

			.icons-item {
				width: 25%;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				.text {
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
					margin-left: 8rpx;
				}
			}
		}

		.li {
			width: 100%;
			border-top: 1px solid #F0F0F0;
			padding: 20rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.li-left {
				font-size: 24rpx;
				color: #000000;
				font-weight: 800;

				text {
					font-weight: 400;
					font-size: 24rpx;
					color: #010101;
					margin-left: 24rpx;
				}
			}

			.li-right {
				width: 40rpx;
				height: 40rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.product-content {
		margin-top: 22rpx;
		overflow: hidden;

		.tab {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			background: #FFFFFF;
			padding: 26rpx 28rpx;

			.tab-item {
				margin-right: 40rpx;

				.tab-item-title {
					position: relative;

					.tab-item-img {
						position: absolute;
						top: 0;
						left: 30%;
						width: 77rpx;
						height: 59rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}

			.tab-item-no {
				font-weight: 400;
				font-size: 32rpx;
				color: #010101;
			}

			.tab-item-active {
				font-weight: 800;
				font-size: 32rpx;
				color: #010101;
			}
		}

		.prodcut-detail {
			overflow: hidden;
			background: #FFFFFF;
			// padding: 0 28rpx;

			image {
				// width: 706rpx !important;
				width: 100% !important;
				display: block;
				margin: 0 auto;
				margin-left: 0rpx;
			}
		}

		.evaluate {
			padding: 26rpx 28rpx;

			.e-title {
				font-size: 28rpx;
				font-weight: bold;
				margin-bottom: 24rpx;
			}

			.e-item {
				width: calc(100vw - 56rpx);
				display: flex;

				image {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					margin-right: 16rpx;
				}

				.username {
					font-size: 24rpx;
					margin-bottom: 6rpx;
				}

				.e-content {
					width: calc(100vw - 190rpx);
					font-size: 24rpx;
					margin-bottom: 24rpx;
					margin-top: 21rpx;
					padding: 32rpx 32rpx 24rpx 32rpx;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					justify-content: space-between;
					background: #FFFFFF;
				}

				.time {
					width: calc(100vw - 186rpx);
					color: #999999;
					font-size: 20rpx;
					margin-top: 24rpx;
				}

			}

			.goodsImg {
				width: calc(100vw - 186rpx);
				display: flex;
				flex-wrap: wrap;
				z-index: 0;
				margin-top: 10rpx;

				image {
					width: 180rpx;
					height: 180rpx;
					border-radius: 8rpx;
				}
			}

			.goods-img:nth-child(3n+3) {
				margin-right: 0;
			}

			.goods-img {
				position: relative;
				width: 180rpx;
				height: 180rpx;
				margin-right: 10rpx;
				margin-top: 10rpx;

				.goods-after {
					width: 180rpx;
					height: 64rpx;
					line-height: 64rpx;
					text-align: center;
					color: #FFFFFF;
					font-size: 24rpx;
					background: rgba(0, 0, 0, 0.6);
					border-radius: 0rpx 0rpx 8rpx 8rpx;
					position: absolute;
					bottom: 0;
					left: 0;
				}
			}
		}
	}

	.carts {
		width: calc(100vw - 56rpx);
		height: 100rpx;
		padding: 28rpx 28rpx 14rpx 32rpx;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;
		margin-top: 28rpx;
	}

	.carts,
	.carts .left,
	.carts .right {
		display: flex;
		justify-content: space-between;
	}

	.carts .left {
		width: 35%;
	}

	.carts .left button {
		// width: 48rpx;
		width: auto;
	}

	.carts .right button {
		margin-left: 16rpx;
	}

	.carts button {
		font-size: 24rpx;
		color: #8A8A8A;
		text-align: center;
		border: none;
		border-radius: 0;
		background-color: transparent;
		margin: 0;
		padding: 0;
		line-height: 1;
	}

	.carts button::after {
		border: none;
	}

	.carts .cart {
		background-color: #FFFFFF;
		border: 2rpx solid #000000;
		height: 80rpx;
		line-height: 80rpx;
		font-weight: 800;
		font-size: 28rpx;
		color: #000000;
		padding: 0 30rpx;
		border-radius: 100rpx;
	}

	.carts .buy {
		background-color: #000000;
		height: 80rpx;
		line-height: 80rpx;
		font-weight: 800;
		font-size: 28rpx;
		color: #FFFFFF;
		padding: 0 44rpx;
		border-radius: 100rpx;
	}

	.popup-content {
		padding: 40rpx;
		position: relative;

		.content-header {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.header-text {
				font-weight: 800;
				font-size: 36rpx;
				color: #000000;
			}

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.content-product {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			padding-bottom: 44rpx;
			border-bottom: 2rpx solid #F0F0F0;

			.product-left {
				width: 161rpx;
				height: 161rpx;
				background: #FFFFFF;
				border-radius: 10rpx;

				image {
					width: 163rpx;
					height: 163rpx;
				}
			}

			.product-right {
				width: calc(100vw - 161rpx);
				height: 161rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding-left: 28rpx;

				.name {
					font-weight: 800;
					font-size: 32rpx;
					color: #010101;
				}

				.price {
					font-weight: 800;
					font-size: 32rpx;
					color: #F73830;
				}
			}
		}

		.conten-imgs {
			margin-top: 48rpx;
			display: flex;
			align-items: center;
			overflow-x: auto;
			white-space: nowrap;
			padding-bottom: 46rpx;
			border-bottom: 2rpx solid #F0F0F0;

			.imgs-item {
				margin-right: 18rpx;
				width: 161rpx;
				height: 161rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				// padding: 0 10rpx 6rpx 10rpx;
				position: relative;

				image {
					width: 161rpx;
					height: 161rpx;
				}

				.imgs-text {
					position: absolute;
					bottom: 6rpx;
					left: 0;
					text-align: center;
					width: 100%;
					font-weight: 400;
					font-size: 20rpx;
					color: #FFFFFF;
				}
			}
		}

		.content-spec {
			margin-top: 32rpx;
			padding-bottom: 28rpx;
			border-bottom: 2rpx solid #F0F0F0;

			.spec-header {
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
			}

			.spec-content {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				margin-top: 24rpx;

				.spec-tag {
					padding: 0 26rpx;
					height: 54rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 24rpx;
					margin-bottom: 28rpx;
					border-radius: 28rpx;
					font-weight: 800;
					font-size: 24rpx;
				}

				.spec-tag-no {
					border: 2rpx solid #DCDCDC;
					color: #060606;
					background: #FFFFFF;
				}

				.spec-tag-active {
					border: 2rpx solid #35D14A;
					background: rgba(53, 209, 74, 0.15);
					color: #35D14A;
				}
			}
		}

		.content-address {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 26rpx;

			.address-left {
				font-weight: 800;
				font-size: 28rpx;
				color: #000000;
			}

			.address-right {
				width: 40rpx;
				height: 40rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.content-number {
			padding: 32rpx 0 24rpx 0;
			border-bottom: 2rpx solid #F0F0F0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.text {
				font-weight: 800;
				font-size: 28rpx;
				color: #000000;

				text {
					font-weight: 400;
					font-size: 28rpx;
					color: #8A8A8A;
					margin-left: 12rpx;
				}
			}
		}

		.popup-footer {
			position: fixed;
			bottom: 0;
			left: 0%;
			width: 100%;
			background-color: #FFFFFF;

			.pfooter-content {
				margin: 0 40rpx 40rpx 40rpx;
				border-top: 2rpx solid #F0F0F0;
				padding-top: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.pfooter-left {
					width: 50%;
					display: flex;
					justify-content: center;
				}

				.pftooer-right {
					width: 50%;
					display: flex;
					justify-content: center;
				}

				.pftooer-buy-btn {
					width: 80%;
					border-radius: 40rpx;
					font-weight: 800;
					font-size: 28rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 20rpx 0;
				}

				.btn-white {
					background: #FFFFFF;
					color: #000000;
					border: 2rpx solid #000000;
				}

				.btn-black {
					background-color: #000000;
					color: #FFFFFF;
				}
			}
		}
	}

	.uni-rate__icon {
		z-index: -1
	}
</style>